<template>
    <view>
        <view class="top_bg"></view>
        <view class="top">
            <view class="top_button">
                <view class="return" @click="returnPage">
                    <image :src="imageBaseUrl + '/img/return.png'"></image>
                </view>
                <view class="line"></view>
                <view class="homepage" @click="goHome">
                    <image :src="imageBaseUrl + '/img/home.png'"></image>
                </view>
            </view>
            <view>订单</view>
        </view>
        <view class="header">
            <uv-sticky bgColor="#fff">
                <uv-tabs :list="tabs" @click="handleTabClick" />
            </uv-sticky>
        </view>
        <uv-modal ref="modalRef" title="" content="是否确定删除该订单？" showCancelButton="true" @confirm="confirm" />
        <div class="show" v-if="index != 1">
            <image :src="imageBaseUrl + '/img/null.png'"></image>
        </div>
        <view class="all" v-if="index == 1">
            <view class="single" v-for="(item, index) in data">
                <view class="top_text">
                    <view class="name">{{ item.scenic_name }}</view>
                    <view class="statuse" v-text="item.status == 1 ? '已完成' : '已支付'"></view>
                </view>
                <view class="img_num_text" @click="goDetail(item)">
                    <view class="img">
                        <image :src="'http://jingqu.kuxia.top' + item.img" alt=""></image>
                    </view>
                    <view class="nums">
                        <view class="name_text">
                            <view class="classify" style="overflow: hidden;
                                         text-overflow: ellipsis;
                             white-space: nowrap;">{{ item.name }}</view>
                            <view class="classify">￥{{ item.total_price }}</view>
                        </view>
                        <view class="name_text">
                            <view class="classify">{{ item.create_time }}</view>
                            <view class="classify">x{{ item.number }}</view>
                        </view>
                        <view class="name_text">
                            <view class="classify">数量：{{ item.number }}</view>
                            <view class="classify">
                                <image :src="imageBaseUrl + '/img/my_bottom.png'" alt=""></image>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="buttons">
                    <view class="button_delete" @click="openModal(item.id)">删除订单</view>
                    <view class="button_delete" @click="goDetails(item)">再次购买</view>
                    <view class="button_deletes">去评价</view>
                    <image style="margin-right: 10px;" :src="imageBaseUrl + '/img/QR_codes.png'" @click="QR_code(item)" alt=""></image>
                </view>
            </view>
        </view>
        <view class="fond">
            ——— <text class="font"> 你可能还喜欢'
            </text> ———
        </view>
        <view class="alls">
            <view class="item" v-for="(item, index) in datas" :key="index"  @click="nulls">
                <view class="imgs">
                    <image :src="`http://jingqu.kuxia.top${item.img}`" mode="aspectFill">
                    </image>
                </view>
                <view class="text">
                    <view class="text_top">{{ item.name }}</view>
                    <view class="text_title">
                        <view class="title_left">游玩榜</view>
                        <view class="title_right">新乡 景区榜第1名</view>
                    </view>
                    <view class="score">
                        <view class="score_img">
                            <image :src="imageBaseUrl + '/img/red_star.png'" alt="" />
                            <image :src="imageBaseUrl + '/img/red_star.png'" alt="" />
                            <image :src="imageBaseUrl + '/img/red_star.png'" alt="" />
                            <image :src="imageBaseUrl + '/img/red_star.png'" alt="" />
                            <image :src="imageBaseUrl + '/img/blank.png'" alt="" />
                        </view>
                        <view class="score_num">4分</view>
                        <view class="score_text">
                            1000条评价
                        </view>
                    </view>
                    <view class="score_box">
                        距离你26km
                    </view>
                    <view class="buy">
                        <view class="buy_title">可订明日</view>
                        <view class="buy_btn">
                            门票<text style="color: red;">￥</text><text style="color: red; font-size: 20px;
                            font-weight: 600;">80</text>起
                        </view>
                    </view>
                    <view class="text_bottm">
                        <view class="text_bottm_title">必玩 ·</view>
                        <view class="text_bottm_text">{{ item.must }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="no_more">没有更多了....</view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '../../api/ticket/index.js'
import config from '../../config/index.js';
const imageBaseUrl = config.image;//图片地址
const data = ref([])//订单数据
const id = ref('')//标签索引
const datas = ref([])//列表数据
const index = ref(1)//标签索引
const lists = ref({})//标签数据
// 标签数据
const tabs = ref([
    { name: '全部', id: 1 },
    { name: '交易完成', id: 1 },
    { name: '待支付', id: 2 },
    { name: '已取消', id: 3 },
    { name: '已支付', id: 4 },
    { name: '已退款', id: 5 }
]);

const nulls = () => {
  uni.showToast({
    title: '待开发至中......',
    icon: 'none'
  });
}

// 当前选中的标签索引
const activeIndex = ref(0);
// 创建对模态框组件的引用
const modalRef = ref(null);

// 打开模态框的方法
const openModal = (ids) => {
    modalRef.value?.open();
    id.value = ids;
};
// 详情
const goDetail = (item) => {
    uni.setStorageSync('QR_code', item)
    uni.navigateTo({
        url: '/pages/Order_Details/Order_Details'
    })
}
// 确认按钮的回调
const confirm = () => {
    console.log('点击确认按钮');
    deleteOrder()
};
// 标签点击处理 - 改进错误处理
const handleTabClick = (indexOrName) => {
    console.log('handleTabClick', indexOrName);
    index.value = indexOrName.id;
};
//  二维码
const QR_code = (item) => {
    uni.setStorageSync('QR_code', item)
    uni.navigateTo({
        url: '/pages/QR_code/QR_code'
    })
}

// 返回
const returnPage = () => {
    uni.navigateBack({
        delta: 1
    });
}

// 主页
const goHome = () => {
    uni.navigateTo({
        url: '/pages/home/home'
    })
}
//删除订单
const deleteOrder = () => {
    console.log(id.value);
    api.deleteOrder({
        id: id.value
    }).then(res => {
        console.log(res);
        if (res.code == 1) {
            uni.showToast({
                title: '删除成功',
                icon: 'success'
            });
            api.Indent({
                user_id: uni.getStorageSync('token').id
            }).then(res => {
                console.log(res);
                data.value = res.data;
            })
        }
    })
}
//再次购买
const goDetails = (item) => {
    lists.value  = item;
    lists.value.id = item.ticketing_id;
    lists.value.current_price = item.total_price / item.number;
    uni.setStorageSync('target', item);
    console.log(lists.value);
    uni.navigateTo({
        url: '/pages/submit/submit'
    });
}
// 预定
const book = (item) => {
    console.log(item[0]);
    // 存储目标订单数据
    uni.setStorageSync('target', item[0]);
    uni.navigateTo({
        url: '/pages/submit/submit'
    });
}

onMounted(() => {
    console.log(uni.getStorageSync('token'));
    console.log('Tabs组件已挂载');
    api.Indent({
        user_id: uni.getStorageSync('token').id
    }).then(res => {
        console.log(res);
        data.value = res.data;
    });
    api.scenic({}).then((res) => {
        datas.value = res.data;

        console.log('接口数据:', res.data)
    }).catch((err) => {
        console.error('景区数据请求失败:', err)
    })
})
</script>

<style lang="scss" scoped>
.text_bottm {
    width: 95%;
    display: flex;
}

.no_more {
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
    color: #535353;
    margin-bottom: 20px;
    height: 50px;
}

.text_bottm_title {
    color: #535353;
    font-size: 16px;
    font-weight: 600;
    width: 22%;
}
.show{
    width: 100%;
    text-align: center;
}
.text_bottm_text {
    width: 78%;
    /* 溢出隐藏文字显示省略号 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.buy_title {
    width: 80px;
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
    border: #ECE2C3 1px solid;
}

.buy {
    margin-top: 10px;
    width: 95%;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.score_num {
    font-size: 17px;
    color: red;
    margin-left: 10px;
    margin-right: 10px;
}

.score {
    display: flex;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.score_img image {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

.title_left {
    background-color: #FFC300;
    width: 32%;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

.title_right {
    background-color: #ECE2C3;
    width: 68%;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

.text_title {
    font-size: 15px;
    margin-top: 10px;
    border-radius: 10px;
    height: 30px;
    width: 75%;
    overflow: hidden;
    display: flex;
}

.text_top {
    width: 100%;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text {
    width: 68%;
    color: #636363;
    height: 180px;
    margin-left: 2%;
    margin-top: 10px;
    background-color: #fff;
}

.imgs image {
    width: 100%;
    height: 180px;
    /* 图片不变形 */
    object-fit: cover;
}

.imgs {
    width: 30%;
    height: 180px;
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
}

.item {
    height: 200px;
    width: 100%;
    margin-top: 10px;
    display: flex;
    background-color: #fff;
}

.alls {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 96%;
    margin-left: 2%;
}

.font {
    color: #000;
    font-size: 17px;
    font-weight: 600;
    margin-left: 10px;
    margin-right: 10px;
}

.fond {
    margin-top: 50px;
    text-align: center;
    color: #bdbdbd;
}

.button_delete {
    width: 80px;
    height: 25px;
    border-radius: 5px;
    margin-left: 10px;
    font-size: 14px;
    color: #717171;
    text-align: center;
    line-height: 25px;
    border: #707070 1px solid;
}

.button_deletes {
    width: 80px;
    height: 25px;
    border-radius: 5px;
    margin-left: 10px;
    font-size: 14px;
    color: #d57878;
    text-align: center;
    line-height: 25px;
    border: #d57878 1px solid;
}

.uv-tabs {
    /* 示例：调整标签栏高度 */
    height: 44px;
}

.all {
    width: 98%;
    margin-left: 1%;
}

.single {
    width: 100%;
    margin-top: 5px;
    height: 160px;
    margin-top: 5px;
    border-radius: 10px;
    background-color: white;
}

.title {
    width: 100%;
    height: 40px;
    display: flex;
    margin-bottom: 10px;
    background-color: white;
    position: fixed;
    z-index: 999;
    top: 0;
    border-bottom: 1px #c8c7c7 solid;
}

.icon {
    width: 65px;
    height: 25px;
    margin-top: 6px;
    margin-left: 10px;
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 1px #a8a7a7 solid;
}

.return img {
    width: 12px;
}

.top_text {
    display: flex;
    justify-content: space-between;
    width: 94%;
    margin-left: 3%;
    line-height: 40px;
}

.statuse {
    color: #abf2d7;
}

.img_num_text {
    width: 94%;
    height: 80px;
    display: flex;
    margin-left: 3%;
    font-size: 14px;
    color: #494949;
}

.img {
    margin-right: 10px;
}

.img image {
    width: 90px;
    height: 70px;
    border-radius: 10px;
}

.nums image {
    width: 15px;
}

.nums {
    width: 70%;
}

.name_text {
    display: flex;
    justify-content: space-between;
}

.classify {
    margin-bottom: 8px;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.classify image {
    width: 15px;
    height: 15px;
}

.buttons {
    display: flex;
}

.buttons image {
    width: 30px;
    height: 30px;
    margin-left: 55px;
}

.list {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.line {
    width: 1%;
    background-color: #8a8a8a;
    height: 70%;
    margin-top: 5%;
}

.return {
    width: 49.5%;
    height: 100%;
    text-align: center;
    line-height: 25px;
}

.return image {
    width: 20px;
    margin-top: 2px;
    height: 20px;
}

.homepage {
    width: 49.5%;
    height: 100%;
    text-align: center;
    line-height: 25px;
}

.homepage image {
    width: 18px;
    margin-top: 3px;
    height: 18px;
}

.top_button {
    width: 70px;
    height: 25px;
    display: flex;
    border-radius: 15px;
    /* margin-top: 30px; */
    margin-left: 20px;
    margin-right: 23%;
    border: 1px solid rgb(192, 192, 192);
}

.header {
    width: 100%;
    position: sticky;
    top: 80px;
}

.top {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid rgb(203, 203, 203);
    background-color: rgb(255, 255, 255);
    position: sticky;
    top: 30px;
    color: #8a8a8a;
    display: flex;
    align-items: center;
}

.top_bg {
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 30px;
    position: sticky;
    top: 0;
}
</style>